import React, { Component } from 'react'
import { Card, Button, Table, Space, message, Input,Select } from 'antd';
import { deleteOne, getAllGoods } from '../../api/productsList';


export default class ProductsList extends Component {
    state = {
        data: []
    }
    componentDidMount() {
        this.getAllProducts()
    }
    // 获取所有商品
    getAllProducts = async () => {
        const res = await getAllGoods()
        if (res.code) {
            this.setState({
                data: res.data
            })
        }
        console.log(res.data);
    }
    //删除
    deleteProducts = async (id) => {
        const res = await deleteOne({ id })
        console.log(res);
        if (res.code) {
            message.success(res.msg);
            this.getAllProducts()
        } else {
            message.warning(res.msg);
        }
    }
    onSearch = value => {
        console.log(value);
    }
    render() {
        const columns = [
            {
                title: '商品名称',
                dataIndex: 'name',
                key: 'name',
                render: text => <a>{text}</a>,
            },
            {
                title: '价格',
                dataIndex: 'price',
                key: 'price',
            },
            {
                title: '产品信息',
                dataIndex: 'title',
                key: 'title',
            },
            {
                title: '简介',
                dataIndex: 'msg',
                key: 'msg',
                width: 450
            },
            {
                title: '操作',
                key: 'action',
                render: (text, record) => (
                    <Space size="middle">
                         <a onClick={(e) => {
                            e.preventDefault()
                            this.props.history.push({
                                pathname:'/products/updateList',
                                query:{
                                    id:record._id
                                }
                            })
                        }}>修改</a>
                        <a onClick={(e) => {
                            e.preventDefault()
                            this.deleteProducts(record._id)
                        }}>删除</a>
                    </Space>
                ),
            },
        ];
        const { Search } = Input;
        const { Option } = Select;
        return (
            <Card title="商品列表" extra={<Button type="primary" onClick={() => {
                this.props.history.push('/products/addList')
            }}>添加商品</Button>}>

                <Input.Group compact>
                    <Select defaultValue="Option1">
                        <Option value="Option1">Option1</Option>
                        <Option value="Option2">Option2</Option>
                    </Select>
                    <Search placeholder="input search text" onSearch={this.onSearch} enterButton />
                </Input.Group>
                <Table rowKey="_id" columns={columns} dataSource={this.state.data} />
            </Card>
        )
    }
}
